<template>
    <div class="container">
        <div class="content">
            <template
                v-if="readonly"
            >
                <div
                    v-for="(item, index) in rateProps"
                    :key="index"
                    v-show="index === 0 || !canExpand||isExpand"
                    class="content-item">
                    <!-- v-if="index==0 || isExpand" -->
                    <div
                        class="rate-label"
                        :style="{ ...labelStyle() }">
                        {{ item.label }}
                    </div>
                    <van-rate

                        color="#FFBB46"
                        void-icon="star"
                        void-color="#e7e7e7"
                        class="rate-star"
                        v-model="data[item.id]"
                        :readonly="readonly"
                        :size="itemSize"
                        allow-half
                    />
                </div>
            </template>
            <template v-else>
                <van-cell-group  class="content-field-group" >
                    <van-field
                        class="content-field"
                        label-class="custom-field-label"
                        v-for="(item, index) in rateProps"
                        :key="index"
                        v-show="index === 0 || !canExpand||isExpand">
                        <template #label>
                            <div
                                class="rate-label"
                                :style="{ ...labelStyle() }">
                                {{ item.label }}
                            </div>
                        </template>
                        <template #input>
                            <van-rate
                                color="#FFBB46"
                                void-icon="star"
                                void-color="#e7e7e7"
                                class="rate-star"
                                v-model="data[item.id]"
                                :readonly="readonly"
                                :size="itemSize"
                                allow-half
                            />
                        </template>
                    </van-field>
                </van-cell-group>
            </template>
        </div>
        <collapse-button
            v-if="canExpand"
            v-model:isExpand="isExpand">
        </collapse-button>
    </div>
</template>

<script >
import { reactive, toRefs, computed } from 'vue';
import { Rate } from 'vant';
import CollapseButton from './CollapseButton.vue';
export default {
    name: '',
    components: {
        CollapseButton,
        [Rate.name]: Rate
    },
    props: {
        canExpand: {
            type: Boolean,
            default: true
        },
        readonly: {
            type: Boolean,
            default: false
        },
        itemSize: {
            type: Number,
            default: 20
        },
        fontSize: {
            type: Number

        },
        labelMarginRight: {
            type: Number,
            default: 8
        },

        modelValue: Object,
        rateProps: Array
    },
    emits: ['update:modelValue'],
    setup (props, context) {
        const state = reactive({
            isExpand: false
        });
        const data = computed({
            get () {
                return props.modelValue;
            },
            set (val) {
                this.$emit('update:modelValue', val);
            }
        });
        const labelStyle = () => {
            const customStyle = {
                fontSize: `${props.fontSize || props.itemSize / 2}px`,
                lineHeight: `${props.itemSize}px`,
                marginRight: `${props.labelMarginRight}px`
            };
            return customStyle;
        };
        return {
            labelStyle,
            data,
            ...toRefs(state)
        };
    }
};
</script>
<style>
.custom-field-label{
    margin-right: 0px;
}
</style>
<style  lang='scss' scoped>
.container {
  display: flex;
  justify-content: space-between;
  font-family: Roboto, Roboto-Regular;
}
.content {

}
.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0px 4px 8px 4px;
}

.rate-label {
  margin-right: 8px;

  // font-size: 14px;

//   font-weight: 800;
  text-align: LEFT;
  color: #000000;
  // line-height: 16px;
}
.rate-star {
  flex-grow: 1;
}
.content-field{
    // padding:5px 7px 10px 7px
    padding-top: 5px ;
    padding-bottom: 10px ;
    padding-left:5px;
    padding-right:5px;

}
.content-field::after{
    border:none
}
.content-field-group
{
    padding: 0px;
}
.content-field-group::after{
      border:none
}
</style>
